<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="${gPath}/styles/dpl-min.css" rel="stylesheet"/>
    <link href="${gPath}/styles/bui-min.css" rel="stylesheet"/>
    <link href="${gPath}/styles/main.css" rel="stylesheet"/>
</head>
<body>

<!--列表页-->
<div class="container">
    <form id="searchForm" class="form-panel">
        <ul class="panel-content">
            <li>
                <span>
                  <label>名称：</label><input type="text" class="control-text" name="companyCategory.name" />
                </span>
                <button type="button" id="btnSearch" class="button button-primary">搜索</button>
            </li>
        </ul>
    </form>
    <div class="search-grid-container">
        <div id="grid"></div>
    </div>
</div>

<!--表单页-->
<div id="ModelFormDialog" style="display: none">
    <form id="ModelForm" class="form-horizontal">
        <div class="control-group">
            <label class="control-label">名称：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="companyCategory.name" data-rules="{required:true}"/>
            </div>
        </div>
        <div class="control-group" style="height: 200px;">
            <label class="control-label">备注：</label>
            <div class="controls">
                <textarea name="companyCategory.remark" style="width: 550px; height: 200px; resize: none"></textarea>
            </div>
        </div>
        <div class="row form-actions actions-bar">
            <div class="span13 offset3 ">
                <button type="submit" class="button button-primary">保存</button>
                <button type="reset" class="button">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript" src="${gPath}/scripts/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="${gPath}/scripts/bui.js"></script>
<script type="text/javascript" src="${gPath}/scripts/seed-min.js"></script>
<script type="text/javascript" src="${gPath}/scripts/config.js"></script>
<script type="text/javascript" src="${gPath}/scripts/common/search.js"></script>
<script type="text/javascript">
    var URI = "${gPath}/clmp/companyCategory", MODULE='companyCategory';
    BUI.use(['common/search', 'bui/overlay', 'bui/form'], function (Search, Overlay, Form) {
        var columns = [
            {dataIndex: 'id', visible: false},
            {title: '名称', dataIndex: 'name', width: '10%'},
            {title: '备注', dataIndex: 'remark', width: '80%'},
          	{title: '操作', dataIndex: '', width: '5%', renderer: function (value, obj) {
                var editStr = '<span class="grid-command btn-edit" title="编辑">编辑</span>';
                var delStr = '<span class="grid-command btn-del" title="删除">删除</span>';
                return editStr + delStr;
        }}];
        var store = Search.createStore(URI, {totalProperty: 'total'});
        var gridCfg = Search.createGridCfg(columns, {
            tbar: {
                items: [
                    {text: '<i class="icon-plus"></i>新建', btnCls: 'button button-small', handler: function () {
                        modelFormObject.clearFields();
                        modelFormObject.set('action', URI);
                        modelFormObject.set('method', "POST");
                        modelFormDialog.show();
                    }},
                    {text: '<i class="icon-remove"></i>删除', btnCls: 'button button-small', handler: delFunction}
                ]
            },
            emptyDataTpl : '<div style="padding: 20px" class="centered"><img src="${gPath}/img/nodata.png"><h2>好像还没有数据</h2></div>',
            plugins: [BUI.Grid.Plugins.CheckSelection]
        });

        var search = new Search({
            store: store,
            gridCfg: gridCfg
        });
        var grid = search.get('grid');
        
        //删除操作
        function delFunction() {
            var selections = grid.getSelection();
            delItems(selections);
        }

        function delItems(items) {
            var ids = [];
            BUI.each(items, function (item) {
                ids.push(item.id);
            });

            if (ids.length) {
                BUI.Message.Confirm('确认要删除选中的记录么？', function () {
                    $.ajax({
                        url: URI + "/" + ids.join("-"),
                        dataType: 'json',
                        type: 'DELETE',
                        data: {ids: ids},
                        success: function (data) {
                            if (data.status == 1) {
                                BUI.Message.Alert('操作成功');
                                search.load();
                            } else {
                                BUI.Message.Alert('删除失败！');
                            }
                        }
                    });
                }, 'question');
            }
        }

        //监听事件，删除一条记录
        grid.on('cellclick', function (ev) {
            var sender = $(ev.domTarget); //点击的Dom
            if (sender.hasClass('btn-del')) {
                delItems([ev.record]);
            } else if (sender.hasClass('btn-edit')) {
                edit(ev.record);
            }
        });

        function edit(record) {
            modelFormObject.clearFields();
            modelFormObject.set('action', URI + "/" + record.id);
            modelFormObject.set('method', "POST");

            for (var name in record) {
                modelFormObject.setFieldValue(MODULE +'.'+ name, record[name]);
            }
            modelFormDialog.show();
        }

        var modelFormDialog = new Overlay.Dialog({
            title: '表单',
            width: 800,
            height: 600,
            mask: false,
            buttons: [],
            contentId: 'ModelFormDialog'
        });

        var modelFormObject = new Form.HForm({
            srcNode: '#ModelForm',
            submitType: 'ajax',
            callback: function (data) {
                if (data.status == 1) {
                    BUI.Message.Alert('操作成功');
                    modelFormDialog.hide();
                    search.load();
                } else {
                    BUI.Message.Alert('操作失败:' + data.msg);
                }
            }
        }).render();
    });
</script>
</body>
</html>